<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
			labelPosition="left" :model="model" :rules="rules" errorType="toast">
			<view class="form">
				<u-form-item label="提现金额" prop="name" borderBottom >
					<u--input type="digit" inputAlign="right" placeholder="请输入提现金额" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
			</view>
			<view class="form">
				<u-form-item label="姓名" prop="name" borderBottom >
					<u--input inputAlign="right" placeholder="请输入姓名" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
			</view>
			<view class="form">
				<u-form-item label="银行" prop="name" borderBottom >
					<u--input inputAlign="right" placeholder="请输入银行" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
			</view>
			<view class="form">
				<u-form-item label="开户行" prop="name" borderBottom >
					<u--input inputAlign="right" placeholder="请输入开户行" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
			</view>
			<view class="form">
				<u-form-item label="银行卡号" prop="name" borderBottom >
					<u--input type="number" inputAlign="right" placeholder="请输入提现银行卡号" v-model="model.name"
						border="none"></u--input>
				</u-form-item>
			</view>
		</u--form>
		
		<!-- 提现说明 -->
		<view class="explan-box">
			<view class="title">提现说明：</view>
			<view class="tip">注意：提现金额将进行审核预计3-5个工作日到账；</view>
			<view class="tip">请确认您的卡号是否正确；如果输入错误，后果自行承担；</view>
		</view>
	</view>
	
	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="withDrawalConfirm">确认提现</u-button>
	</view>
	
	<!-- 提现模态框 -->
	<u-modal showCancelButton :show="withdrawalPop" title="提现至银行卡" @cancel="withdrawalPop = false" @confirm="confirm" confirmColor="#516DDB">
		<view class="confirm-tip">是否要确定提现至银行卡？</view>
	</u-modal>
</template>

<script setup>
	const withdrawalPop = ref(false)
	const model = ref({
		name: '',
		self: false
	})
	const showSex = ref(false)
	const actions = ref([{
			name: '男'
		},
		{
			name: '女'
		},
	])
	const rules = ref({
		name: [{
			required: true,
			message: '请输入手机号',
			trigger: ['change'],
		}, ]
	})
	
	// 确认
	const confirm = () => {
		withdrawalPop.value = false
		uni.navigateBack()
	}
	
	const sexSelect = (e) => {
		model.value.name = e.name
	}
	const withDrawalConfirm = () => {
		withdrawalPop.value = true
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;
		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	.self-set {
		@include end(100%);
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
	.explan-box {
		margin-top: 40rpx;
		padding: 0 10rpx;
		.title {
			color: #000000;
			font-weight: bold;
			margin-bottom: 18rpx;
		}
		.tip {
			font-size: 26rpx;
			color: #999999;
		}
	}
	
	.confirm-tip {
		font-size: 30rpx;
		color: #312C2A;
		text-align: center;
	}
</style>